import React, { Component } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import styles from "./styles";

class SegmentedBtn extends Component {
  constructor(props) {
    super(props);
    this.pressColor = "rgba(0,0,0,0.3)";
    const typeP = [false, false];
    this.tintColors = [];

    const { values } = this.props;

    this.state = {
      typePress: typeP,
      menuData: values,
    };
    const { selectedIndex, tintColor } = this.props;
    const { typePress } = this.state;

    this.tintColors = tintColor;
    typePress[selectedIndex] = true;
  }

  componentWillReceiveProps() {
    const { values } = this.props;
    this.setState({ menuData: values });
  }

  renderSwipeView = () => {
    let { typePress } = this.state;
    const { menuData: types } = this.state;
    const { onSelectChange } = this.props;
    return (
      <View style={styles.typesView}>
        {types.map((item, i) => {
          const renderItem = (
            <View
              style={[
                styles.typesItem,
                {
                  width: "100%",
                  marginTop: 10,
                  // height: 40,
                  // lineHeight: 40,
                },
              ]}
            >
              <Text
                style={{
                  fontSize: 18,
                  color: typePress[i] ? this.tintColors[0] : this.tintColors[1],
                  textAlign: "center",
                  alignSelf: "center",
                  width: "100%",
                  marginTop: 5,
                }}
              >
                {item}
              </Text>
              <View
                style={{
                  // width: "100%",
                  height: 4,
                  width: "20%",
                  marginTop: 10,
                  backgroundColor: typePress[i]
                    ? this.tintColors[0]
                    : "rgba(255,255,255,0)",
                }}
              />
            </View>
          );
          return (
            <TouchableOpacity
              key={i}
              onPress={() => {
                const typeP = [false, false];
                typePress = typeP; // 初始化
                typePress[i] = true; // 设置选中状态
                this.setState({ typePress }); // 更新
                onSelectChange(i);
              }}
              style={{
                textAlign: "center",
                alignSelf: "center",
                width: "50%",
              }}
            >
              {renderItem}
            </TouchableOpacity>
          );
        })}
      </View>
    );
  };

  render() {
    return (
      <View style={styles.root}>
        {/* 菜单 */}
        {this.renderSwipeView()}
      </View>
    );
  }
}

export default SegmentedBtn;
